<template>
  <div class="vi-drag-container">
    <render :component-definition="componentDefinition" v-if="componentDefinition.name !== 'template'">
      <vi-draggable
        v-if="componentDefinition.children"
        style="height: 100%"
        :componentDraggableList="componentDefinition.children"
        :transitionGroupKey="componentDefinition.key">
        <draggable-container
          v-for="componentDefinitionItem in componentDefinition.children"
          :key="componentDefinitionItem.key"
          :componentDefinition="componentDefinitionItem"
        />

      </vi-draggable>
    </render>
    <vi-draggable
      v-else-if="componentDefinition.children"
      style="height: 100%"
      :componentDraggableList="componentDefinition.children"
      :transitionGroupKey="componentDefinition.key">
      <draggable-container
        v-for="componentDefinitionItem in componentDefinition.children"
        :key="componentDefinitionItem.key"
        :componentDefinition="componentDefinitionItem"/>
    </vi-draggable>
  </div>
</template>

<script>
import Render from '../render/render'
import ViDraggable from '../../Draggable/ViDraggable'
export default {
  name: 'draggableContainer',
  props: {
    componentDefinition: {
      type: Object,
      required: true
    }
  },
  components: { ViDraggable, Render }
}
</script>

<style scoped>
    .vi-drag-container {
        height: 100%;
    }
</style>
